import {Breadcrumb, Button, Card, Form, Input, Radio, Select, Space, Upload} from "antd";
import {Link, useSearchParams} from "react-router-dom";
import {PlusOutlined} from "@ant-design/icons";
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'
import './index.scss'
import useStore from "@/store";
import {useEffect, useRef, useState} from "react";
import {observer} from "mobx-react-lite";
import {http} from "@/utils";

const Publish = () => {
    const {channelListStore} = useStore()

    // 上传图片的列表
    const [fileList, setFileList] = useState([]);

    const onUploadChange = ({fileList})=>{
        setFileList(fileList)
    }

    // 切换图片
    const [imgCount, setImgCount] = useState(1);
    const radioChange = (e)=>{
        setImgCount(e.target.value)
    }


    // 获取params参数
    const [params] = useSearchParams()
    const articleId = params.get('id')

    // 提交表单
    const onFinish = async (val)=>{
        const { type, ...rest } = val
        const data = {
            ...rest,
            // 注意：接口会按照上传图片数量来决定单图 或 三图
            cover: {
                type,
                images: fileList.map(item => item.url)
            }
        }
        if(articleId){
            // 编辑
            await http.put(`/mp/articles/${data.id}?draft=false`,data)
        }else{
            // 新增
            await http.post('/mp/articles?draft=false', data)
        }
    }

    const form = useRef(null);
    // 获取编辑文章数据
    useEffect(() => {
        const loadDetail = async ()=>{
            const res = await http.get(`/mp/articles/${articleId}`)
            // 表单数据回填
            const { cover, ...formValue } = res.data.data
            form.current.setFieldsValue({...formValue,type:cover.type})
            setFileList(cover.images.map(item=>({url:item})))
        }
        if (articleId) {
            loadDetail().then()
        }
    }, [articleId]);

    return (<div className="publish">
        <Card
            title={
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <Link to="/home">首页</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>{articleId?'更新':'发布'}文章</Breadcrumb.Item>
                </Breadcrumb>
            }
        >
            <Form
                labelCol={{span: 4}}
                wrapperCol={{span: 16}}
                initialValues={{type: 1,content: ''}}
                onFinish={onFinish}
                ref={form}
            >
                <Form.Item
                    label="标题"
                    name="title"
                    rules={[{required: true, message: '请输入文章标题'}]}
                >
                    <Input placeholder="请输入文章标题" style={{width: 400}}/>
                </Form.Item>
                <Form.Item
                    label="频道"
                    name="channel_id"
                    rules={[{required: true, message: '请选择文章频道'}]}
                >
                    <Select placeholder="请选择文章频道" style={{width: 400}}>
                        {channelListStore.channelList.map(item => (
                            <Select.Option key={item.id}
                                    value={item.id}>{item.name}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>

                <Form.Item label="封面">
                    <Form.Item name="type">
                        <Radio.Group onChange={radioChange}>
                            <Radio value={1}>单图</Radio>
                            <Radio value={3}>三图</Radio>
                            <Radio value={0}>无图</Radio>
                        </Radio.Group>
                    </Form.Item>
                    {
                        imgCount>0 && <Upload
                            name="image"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList
                            action="http://geek.itheima.net/v1_0/upload"
                            fileList={fileList}
                            onChange={onUploadChange}
                            multiple={imgCount>1}
                            maxCount={3}
                        >
                            <div style={{marginTop: 8}}>
                                <PlusOutlined/>
                            </div>
                        </Upload>
                    }
                </Form.Item>
                <Form.Item
                    label="内容"
                    name="content"
                    rules={[{required: true, message: '请输入文章内容'}]}
                >
                    <ReactQuill
                        className="publish-quill"
                        theme="snow"
                        placeholder="请输入文章内容"
                    />
                </Form.Item>

                <Form.Item wrapperCol={{offset: 4}}>
                    <Space>
                        <Button size="large" type="primary" htmlType="submit">
                            {articleId?'更新':'发布'}文章
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </Card>
    </div>)
}

export default observer(Publish)